<template>
  <div class="container">
    <header class="header" id="header">
      <div class="left">
        <router-link class="iconfont icon-back" to="user" tag="span"></router-link>
      </div>
      <div class="right">
        <u @click="toRegister">注册</u>
      </div>
    </header>
    <div class="content">
      <div class="top">
        <h1>用户登录</h1>
      </div>
      <div class="in">
        <div class="use">
          <s class="iconfont icon-wode1 s1"></s>
          <van-field
            v-model="username"
            placeholder="请输入手机号"
            clearable
            :error-message="usernamemsg"
            class="use1"
          />
        </div>
        <div class="pass">
          <s class="iconfont icon-suo s2"></s>
          <van-field
            v-model="password"
            type="password"
            clearable
            placeholder="请输入密码"
            :error-message="passwordmsg"
            class="pass1"
          />
        </div>
        <div class="w">
          <input type="radio">
          <i>记住密码</i>
          <b>忘记密码</b>
        </div>
      </div>
      <div class="lo">
          <van-button type="primary" :loding="loading" loading-text="登陆..." size="large" :disabled="flag" @click="login" class="lo1">登陆</van-button>
      </div>
      <div class="other">
        <div class="other-t">
          <van-divider :style="{ color: 'green', borderColor: '#444', padding: '0 16px' }">
            其他方式登陆
          </van-divider>
        </div>
        <div class="other-b">
          <strong class="iconfont iconQQ"></strong>
          <strong class="iconfont iconweixin"></strong>
          <strong class="iconfont iconweibo"></strong>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import 'vant/lib/index.css'
import { Field, Button, Toast, Divider } from 'vant'
import axios from 'axios'

Vue.use(Field)
Vue.use(Button)
Vue.use(Toast)
Vue.use(Divider)
export default {
  data () {
    return {
      username: '',
      password: '',
      loading: false,
      flag: false
    }
  },
  computed: {
    usernamemsg () {
      if (this.username === '') {
        return ''
      } else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.username)) {
        return '手机号码格式错误'
      } else {
        return ''
      }
    },
    passwordmsg () {
      if (this.password === '') {
        return ''
      } else if (!/^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/.test(this.password)) {
        return '密码格式错误'
      } else {
        return ''
      }
    }
  },
  methods: {
    toRegister(){
      this.$router.replace('/register')
    },
    login(){
      if(this.username === '' || this.usernamemsg === '手机号码格式错误'){
        Toast('手机号码输入有误')
        return
      }
      if(this.password === '' || this.passwordmsg === '密码格式错误，最少为6位'){
        Toast('密码输入有误')
        return
      }
      this.loginFn()
    },
    loginFn(){
      this.flag = true
      this.loading = true
      axios.post('https://www.daxunxun.com/users/login',{
        username: this.username,
        password: this.password
      }).then(res=>{
        this.flag = false
        this.loading = false
        if(res.data === 2){
          Toast('该用户未注册，请先注册')
        }else if(res.data === -1){
          Toast('密码错误')
        }else if(res.data === 0){
          Toast('登录失败')
        }else{
          Toast('登录成功')
          localStorage.setItem('isLogin', 'ok')
          this.$router.back()
        }
      })
    }
  }
}


</script>

<style lang="scss" scoped>
#header{
  height: 40px;
  background: #fff;
  .left{
    float: left;
    margin-left: 10px;
    span{
      line-height: 40px;
    }
  }
  .right{
    float: right;
    margin-right: 10px;
    u{
      line-height: 40px;
    }
  }
}
.content{
  width: 100%;
  height: 300px;
  position: relative;
  .top{
    width: 100%;
    height: 40px;
    h1{
      text-align: center;
      color: rgba(16, 16, 16, 1);
      font-size: 28px;
      font-weight: 100;
      margin-top: 100px;
    }
  }
  .in{
    height: 220px;
    position: relative;
    width: 375px;
    border-bottom: 1px solid #444;
    .use{
      height: 60px;
      .s1{
        position: absolute;
        left: 60px;
        top: 25px;
      }
      .use1{
        left: 120px;
        top: 15px;
        font-size: 14px;
      }
    }
    .pass{
      height: 60px;
      .s2{
        position: absolute;
        left: 60px;
        top: 100px;
      }
      .pass1{
        left: 120px;
        top: 28px;
        font-size: 14px;
      }
    }
    .w{
      position: absolute;
      left: 60px;
      top: 150px;
      i{
        margin-left: 8px;
      }
      b{
        margin-left: 80px;
      }
    }
  }
  .lo{
    position: relative;
    width: 100%;
    height: 50px;
    button{
      position: absolute;
      left: 89px;
      width: 200px;
      height: 50px;
      border-radius: 26px 26px 26px 26px;
      margin-top: 8px;
      background: none;
      color: #444;
    }
  }
  .other{
    margin-top: 60px;
    .other-b{
      display: flex;
      strong{
        flex: 1;
        text-align: center;
        font-size: 24px;
        color: green;
      }
    }
  }
}
</style>